<template>
  <div class="flex" :style="{ color: props.color }">
    {{ props.msg }}
    <el-tooltip v-if="props.isPicUrl" class="item" effect="dark" placement="top">
      <template #content>
        <el-image
          :src="props.picUrl"
          :style="{ width: props.width }"
          @click="imagePreview(props.picUrl!)"
        />
      </template>
      <span class="flex flex-items-center ml-5px">
        <Icon icon="ep:question-filled" /> {{ notext ? '' : '示例' }}</span
      >
    </el-tooltip>
  </div>
</template>
<script lang="ts" setup>
import { createImageViewer } from '@/components/ImageViewer'

defineOptions({ name: 'ExplainTip' })

const props = defineProps({
  // 背景颜色
  bgColor: {
    type: String,
    default: () => 'none'
  },
  // 字体颜色
  color: {
    type: String,
    default: () => 'var(--el-color-primary)'
  },
  // 内容信息
  msg: {
    type: String,
    default: () => '请输入内容...'
  },
  isPicUrl: {
    type: Boolean,
    default: false
  },
  // 示例图片
  picUrl: {
    type: String
  },
  width: {
    type: String,
    default: '260px'
  },
  notext: {
    type: Boolean,
    default: false
  }
})
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    zIndex: 99999999,
    urlList: [imgUrl]
  })
}
</script>
